<template>
  <transition name="slide-right">
    <div class="excel_export_module" @click.self="onOEMPanelClick">
      <div ref="OEM" class="OEM-content">
        <div class="row title">
          <span>OEM表格导出</span>
          <span>OEM表格导出</span>
        </div>
        <!-- 数据选取 -->
        <div class="row range-container">
          <el-input v-model="meterNumber.lower" size="mini" placeholder="请输入起始表号" />
          <span>-</span>
          <el-input v-model="meterNumber.upper" size="mini" placeholder="请输入结束表号" />
          <el-select v-model="dataOrigin.currentOrigin" size="mini" @change="onPresetChange">
            <el-option
              v-for="option in dataOrigin.originOptions"
              :key="option"
              :label="option"
              :value="option"
            />
          </el-select>
        </div>
        <div class="row button-container">
          <el-select v-model="presets.currentPreset" size="mini" @change="onPresetChange">
            <el-option
              v-for="option in presets.presetOptions"
              :key="option"
              :label="option"
              :value="option"
            />
          </el-select>
          <!-- 保存预设 -->
          <i class="iconfont icon-integral" @click="storeColumnsToPreset" />
          <!-- 预览数据 -->
          <i class="iconfont icon-visible" @click="previewColumnsToTable" />
          <!-- 上传文件 -->
          <el-upload
            class="upload-demo"
            action=""
            :accept="'.xlsx'"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="uploadExcelFile"
          >
            <i class="iconfont icon-upload" />
          </el-upload>
          <!-- 导出文件 -->
          <i class="iconfont icon-download-line" @click="downloadExcelFile" />
          <!-- 清空预览 -->
          <i class="iconfont icon-reset" />
        </div>
        <!-- 表格数据预览 -->
        <div class="row">
          <el-table size="mini" border>
            <el-table-column prop="AAG001" label="表号" />
            <el-table-column prop="AAG002" label="测试" />
          </el-table>
        </div>
        <!-- 字段选择 -->
        <div class="row fields-container">
          <div class="title">
            <span>选中字段</span>
            <span>选中字段</span>
            <el-switch
              v-model="allowRemoveFields"
              :active-color="theme === 'light' ? '#5584B0' : '#09B1EC'"
            />
          </div>
          <div
            :class="{
              'items-container': true,
              isEdit: allowRemoveFields
            }"
            tag="div"
            @dragover="onFieldsDragover"
            @drop.prevent="onFieldsDropDown"
            @click="onDropDwonRegionClick"
          >
            <span
              ref="selectedFields"
              v-for="field in selectedFieldsList"
              :key="field"
              class="selected-field"
            >
              {{ field }}
              <i class="iconfont icon-close" />
            </span>
          </div>
        </div>
        <div class="row fields-container">
          <div class="title">
            <span>备选字段</span>
            <span>备选字段</span>
          </div>
          <TransitionGroup class="items-container" mode="out-in" tag="div" :css="false">
            <span
              ref="fields"
              v-for="field in unSelectedFieldsList"
              :key="field"
              draggable
              @dragstart="onFieldDragStart"
            >
              {{ field }}
            </span>
          </TransitionGroup>
        </div>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import Vue from 'vue'
import { Getter } from 'vuex-class'
import { Component, Ref, Emit } from 'vue-property-decorator'
@Component
class ExcelExport extends Vue {
  @Ref() OEM!: HTMLElement
  @Ref() fields!: HTMLElement | HTMLElement[]
  @Ref() selectedFields!: HTMLElement | HTMLElement[]
  @Getter('theme') theme!: 'dark' | 'light'
  meterNumber: {
    lower: string
    upper: string
  } = {
    upper: '',
    lower: ''
  }
  dataOrigin: {
    currentOrigin: string
    originOptions: string[]
  } = {
    currentOrigin: 'AAF',
    originOptions: ['AAF']
  }
  presets: {
    currentPreset: string
    presetOptions: string[]
  } = {
    currentPreset: '初装-默认',
    presetOptions: ['初装-默认']
  }
  allowRemoveFields: boolean = false
  draggingField: string = ''
  currentFieldsList: string[] = [
    'AAF001',
    'AAF002',
    'AAF003',
    'AAF004',
    'AAF005',
    'AAF006',
    'AAF007',
    'AAF008',
    'AAF009',
    'AAF010',
    'AAF011',
    'AAF012'
  ]
  selectedFieldsList: string[] = ['AAF001']
  get unSelectedFieldsList() {
    return this.currentFieldsList.filter(field => !this.selectedFieldsList.includes(field))
  }
  mounted() {
    this.animateOEMContent()
  }
  @Emit('onOEMClose')
  onOEMPanelClick() {
    this.animateOEMContent(true)
    return
  }
  onPresetChange(preset: string) {
    console.log(preset)
  }
  onFieldDragStart(e: DragEvent) {
    this.allowRemoveFields = false
    const span = e.target as HTMLElement
    this.draggingField = span.innerText
  }
  onFieldsDragover(e: DragEvent) {
    e.preventDefault()
  }
  onFieldsDropDown(e: DragEvent) {
    e.preventDefault()
    let before_field: HTMLElement | null = null
    if (Array.isArray(this.fields)) {
      const origin = this.fields.find(item => item.innerText === this.draggingField)
      if (!origin) return
      before_field = origin
    } else {
      before_field = this.fields
    }
    const { left: first_left, top: first_top } = before_field.getBoundingClientRect()
    this.selectedFieldsList.push(this.draggingField)
    this.$nextTick(() => {
      let last_field: HTMLElement | null = null
      if (Array.isArray(this.selectedFields)) {
        const origin = this.selectedFields.find(item => item.innerText === this.draggingField)
        if (!origin) return
        last_field = origin
      } else {
        last_field = this.selectedFields
      }
      const { left: last_left, top: last_top } = last_field.getBoundingClientRect()
      last_field.animate(
        [
          {
            transform: `translateX(${first_left - last_left}px) translateY(${
              first_top - last_top
            }px)`
          },
          { transform: 'translateX(0) translateY(0)' }
        ],
        { duration: 500, easing: 'ease', fill: 'both' }
      )
    })
  }
  onDropDwonRegionClick(e: MouseEvent) {
    if (!this.allowRemoveFields) return
    const ele = e.target as HTMLElement
    if (ele.className.indexOf('icon-close') === -1) return
    const idx = this.selectedFieldsList.findIndex(field => field === ele.innerText)
    this.selectedFieldsList.splice(idx, 1)
  }
  animateOEMContent(reverse: boolean = false) {
    const keyframes = [{ width: 0 }, { width: '500px' }]
    this.OEM.animate(reverse ? keyframes.reverse() : keyframes, {
      duration: 500,
      easing: 'ease',
      fill: 'both'
    })
  }
  storeColumnsToPreset() {
    console.log('store these properties as preset')
  }
  previewColumnsToTable() {
    const { upper, lower } = this.meterNumber
    if (upper === '' && lower === '') {
      this.$message({
        type: 'warning',
        message: '表号不能为空'
      })
      return
    }
  }
  uploadExcelFile(e: any) {
    console.log(e)
  }
  downloadExcelFile() {
    console.log('download all data in the preview area as a excel file')
  }
}
export default ExcelExport
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.excel_export_module {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 5;
  backdrop-filter: blur(10px);
  #flex(row, center, flex-end);
  .OEM-content {
    box-sizing: border-box;
    padding: 20px 10px;
    height: 100%;
    width: 500px;
    overflow: hidden;
    #color(background-color, --module-bg-color);
    .row {
      width: 100%;
      margin-bottom: 10px;
      flex-wrap: nowrap;
      #flex(row, center, flex-start);
    }
    .title {
      width: 100%;
      position: relative;
      span {
        font-size: 20px;
        font-weight: 900;
        z-index: 2;
        #color(color, --primary-text-color);
      }
      span:first-child {
        position: absolute;
        left: 3px;
        top: 3px;
        z-index: 1;
        #color(color, --gray-red-color);
        [data-theme='dark'] & {
          #color(color, --primary-red-color);
        }
      }
    }
    .range-container {
      span {
        margin: 0 10px;
      }
      .el-select {
        margin-left: 10px;
      }
    }
    .button-container {
      span {
        font-size: 14px;
        margin-right: 5px;
        white-space: nowrap;
      }
      i {
        display: block;
        box-sizing: border-box;
        padding: 5px;
        margin-left: 10px;
        border-radius: 5px;
        border: solid 1px;
        transition: all 0.2s ease;
        cursor: pointer;
        #color(border-color, --primary-border-color);
        #color(color, --primary-text-color);
        #color(background-color, --module-bg-color);
        #shadow-color(0, 3px, 6px, 0, --lighter-shadow-color);
      }
      i:hover {
        color: #ffffff;
        #color(border-color, --primary-blue-color);
        #color(background-color, --primary-blue-color);
      }
    }
    .fields-container {
      margin-bottom: 10px;
      #flex(column, flex-start, flex-start);
      .title {
        margin-bottom: 10px;
        flex-wrap: nowrap;
        #flex(row, center, flex-start);
      }
      .items-container {
        box-sizing: border-box;
        padding: 10px;
        width: 100%;
        min-height: 200px;
        border: solid 1px;
        border-radius: 5px;
        flex-wrap: wrap;
        align-content: flex-start;
        #flex(row, flex-start, flex-start);
        #color(border-color, --primary-border-color);
        #shadow-color(2px, 2px, 14px, 0, --lighter-shadow-color);
        span {
          box-sizing: border-box;
          padding: 5px 8px;
          margin: 0 5px 5px 0;
          border-radius: 2px;
          font-size: 14px;
          cursor: pointer;
          #flex(row, center, center);
          #color(color, --primary-text-color);
          #color(background-color, --heavier-bg-color);
          i {
            display: none;
          }
        }
      }
      .isEdit {
        span > i {
          display: inline;
        }
      }
    }
    .fields-container > .title {
      justify-content: space-between;
    }
    .el-input,
    .el-select {
      border-radius: 5px;
      #shadow-color(0, 3px, 6px, 0, --lighter-shadow-color);
    }
  }
}
.fields-enter-active,
.fields-leave-active {
  transition: all 0.5s ease;
}
.fields-enter,
.fields-leave-to {
  opacity: 0;
}

.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.5s ease;
}
.slide-right-enter,
.slide-right-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>
